<template>
	<view>
		<!-- tab切换 -->
		<view class="tab">
			<view :class="tabindex==0?'active':''" @click="selecttab(0)">
				个人信息
			</view>
			<view :class="tabindex==1?'active':''" @click="selecttab(1)">
				门店信息
			</view>
			<view :class="tabindex==2?'active':''" @click="selecttab(2)">
				代金券
			</view>
		</view>
		<!-- 个人信息 -->
		<view class="list" v-show="tabindex==0">
			<view class="box">
				<view class="left">
					头像
				</view>
				<view class="right">
					<view class="maximage">
						<image src="../../static/black.jpg" mode=""></image>
					</view>
					<view class="minimage">
						<image src="../../static/info/images/info_68_68.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="left">
					昵称
				</view>
				<view class="right">
					<view class="modify">
						默默
					</view>
					<view class="minimage">
						<image src="../../static/info/images/info_68_68.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="left">
					手机号
				</view>
				<view class="right">
					<view class="modify">
						1235665956895658
					</view>
					<view class="minimage">
						<image src="../../static/info/images/info_68_68.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="left">
					性别
				</view>
				<view class="right">
					<view class="modify">
						女
					</view>
					<view class="minimage">
						<image src="../../static/info/images/info_68_68.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="left">
					生日
				</view>
				<view class="right">
					<view class="modify">
						199-12-3
					</view>
					<view class="minimage">
						<image src="../../static/info/images/info_68_68.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="left">
					地区
				</view>
				<view class="right">
					<view class="modify">
						山东济南
					</view>
					<view class="minimage">
						<image src="../../static/info/images/info_68_68.jpg" mode=""></image>
					</view>
				</view>
			</view>
		</view>


		<!-- 门店信息 -->
		<view class="store" v-show="tabindex==1">
			<view class="box">
				<view class="left">
					门店图
				</view>
				<view class="image">
					<image src="../../static/black.jpg" mode=""></image>
				</view>
			</view>
			<view class="box">
				<view class="left">
					门店图
				</view>
				<view class="right">
					门福通的店
				</view>
			</view>
			<view class="box">
				<view class="left">
					营业时间
				</view>
				<view class="right">
					8:00-16:00
				</view>
			</view>
			<view class="box">
				<view class="left">
					地址
				</view>
				<view class="right">
					西安市雁塔科技路9号
				</view>
			</view>
			<view class="box">
				<view class="left">
					联系电话
				</view>
				<view class="right">
					14544554433
				</view>
			</view>
			<view class="box">
				<view class="left">
					营业时间
				</view>
				<view class="right">
					8:00-16:00
				</view>
			</view>
			<view class="boxs">
				<view class="left">
					店铺照片
				</view>
				<view class="image">
					<image src="../../static/black.jpg" mode=""></image>
				</view>
			</view>

		</view>




		<!-- 代金券 -->
		<view class="vouchers" v-show="tabindex==2">
			<view class="list" v-for="(item,index) in 6" :key="index">
				<view class="left">
					<image src="../../static/black.jpg"></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">
							买单
						</view>
						<view class="image">
							<image src="../../static/xiyoujiantou.png" mode=""></image>
						</view>
					</view>
					<view class="center">
						<view class="">
							周一至周日
						</view>
						<view class="">
							部分商品可用
						</view>
						<view class="">
							免预约
						</view>
						<view class="">
							可叠加
						</view>
					</view>
					<view class="bottom">
						￥80 代100元
					</view>
					<view class="button">
						待接受
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabindex: 0,
			}
		},
		methods: {
			// tab切换
			selecttab(index) {
				this.tabindex = index
			},
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.tab {
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		color: rgba(0, 0, 0, 0.25);
		display: flex;
		align-items: center;
		justify-content: space-around;

		.active {
			color: rgba(0, 0, 0, 0.76);
		}
	}

	// 个人信息
	.list {
		.box {
			padding: 20rpx;
			border-bottom: 1rpx solid #ECECEC;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				color: rgba(0, 0, 0, 0.68);
				font-size: 28rpx;
			}

			.right {
				display: flex;
				align-items: center;

				.modify {
					margin-right: 20rpx;
				}

				.maximage {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;

					image {
						border-radius: 50%;
					}
				}

				.minimage {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}


	//门店信息
	.store {
		.box {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #ECECEC;

			.left {
				flex: 0 0 20%;
			}

			.image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.boxs {
			padding: 20rpx;
			border-bottom: 1rpx solid #ECECEC;

			.image {
				width: 120rpx;
				height: 120rpx;
				margin: 20rpx 0;
			}
		}
	}



	// 优惠券
	.vouchers {
		.list {
			padding: 20rpx;
			border-bottom: 1rpx solid #ECECEC;
			display: flex;
			align-items: center;

			.left {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;

				image {
					border-radius: 50%;
				}
			}

			.right {
				.top {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.76);
					display: flex;
					align-items: center;

					.image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.center {
					color: #FFFFFF;
					display: flex;

					view {
						background-color: #f49c1c;
						padding: 4rpx 6rpx;
						margin-right: 10rpx;
						font-size: 22rpx;
						border-radius: 50rpx;
					}
				}

				.bottom {
					font-size: 24rpx;
					color: #7f7f7f;
				}

				.button {
					width: 124rpx;
					height: 50rpx;
					background-color: #f49c1c;
					border-radius: 50rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
